<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        #dog1{
            padding: 0;
            margin: 0 auto;
            width: 100%;
            height: 500px;
            background-image:url("imgs/dog-top.jpg");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        #dog_bottom{
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30px;
        }
        body{
            font-size: 14px;
            line-height: 1.428571429;
        }
        .cat-cafe-top{
            color: #64c9e1;
            font-size: 3em;
            text-align: center;
            padding: 1em;
            font-weight:normal;
        }
        .cat-cafe-h3{
            color: #a56437;
            font-size: 28px;
            margin: 20px 0 10px;
            font-weight:normal;
        }
        .cat-cafe-h3 small{
            color: #9A9A9A;
            font-weight: 300;
            line-height: 1.5;
            font-size: 60%;
        }
        .dog-park-container{
            width: 970px;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
            box-sizing: border-box;
        }
        .dog-park-container p{
            font-size: 16px;
            line-height: 1.5;
        }
        .cat-cafe-hr{
            margin-top: 20px;
            margin-bottom: 20px;
            border: 0;
            border-top: 1px solid #eeeeee;
        }

        .el-menu-item_top{
            position:relative;
            left: 170px;
        }
        b:hover{
            color: orange;
        }
        a{
            text-decoration: none;
        }
        a:link{color: black}
        a:visited{color: black}
        a:hover{color: orange}
        a:active{color: orange}
        .el-menu--horizontal>.el-menu-item {
            border-bottom: none;
        }
        .el-menu.el-menu--horizontal {
            border-bottom: none;
        }
        .el-menu--horizontal>.el-menu-item.is-active {
            border-bottom: none;
        }
        .el-icon-arrow-down:before {
            content: none;
        }
    </style>
</head>
<body>
<div style="width: 1000px;margin: 0 auto;padding: 0">
    <el-menu style="width: 1200px;margin: 0 auto"
             mode="horizontal"
             @select="handleSelect"
             text-color="black"
             active-text-color="black">
        <a href=""><img src="logo.png" style="float: left;position: relative;width: 80px; height: 77px"></a>
        <el-menu-item index="1" class="el-menu-item_top"><b><a href="/index.html">首页</a> </b></el-menu-item>
        <el-menu-item class="el-menu-item_top">
            <el-submenu index="2" style="position:relative;top:3px;right: 5px">
                <template slot="title"><b>在售品种</b></template>
                <el-menu-item index="2-1"><a href="/searchcat.html">在售猫咪</a></el-menu-item>
                <el-menu-item index="2-2"><a href="/searchdog.html">在售狗狗</a></el-menu-item>
            </el-submenu>
        </el-menu-item>
        <el-menu-item class="el-menu-item_top">
            <el-submenu index="3" style="position:relative;top:3px;right: 5px">
                <template slot="title"><b>宠物词典</b></template>
                <el-menu-item index="3-1"><a href="/catDictionary.html">猫咪的饲养方式</a></el-menu-item>
                <el-menu-item index="3-2"><a href="/dogDictionary.html">狗狗的饲养方式</a></el-menu-item>
            </el-submenu>
        </el-menu-item>
        <el-menu-item class="el-menu-item_top">
            <el-submenu index="4" style="position:relative;top:3px;right: 5px">
                <template slot="title"><b>服务项目</b></template>
                <el-menu-item index="4-1"><a href="/宠物美容.html">宠物美容</a></el-menu-item>
                <el-menu-item index="4-2"><a href="/宠物酒店.html">宠物酒店</a></el-menu-item>
                <el-menu-item index="4-3"><a href="/catcafe.html">猫咖啡馆</a></el-menu-item>
                <el-menu-item index="4-4"><a href="/dogpark.html">狗狗公园</a></el-menu-item>
            </el-submenu>
        </el-menu-item>
        <el-menu-item index="5" class="el-menu-item_top"><a href="/lianxi.html"><b>联系我们</b></a></el-menu-item>
        <el-menu-item index="6" style="float: right;position: relative"><i class="el-icon-user" style="font-size: 30px"></i></el-menu-item>
        <div style="float: right;position: relative;top: 10px">
            <el-input type="text">
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
    </el-menu>
    <div id="dog1"></div>
    <h1 class="cat-cafe-top">狗狗公园</h1>
    <h3 class="cat-cafe-h3">
        狗狗公园的使用方法<small> How to Use </small>
    </h3>
    <div>
        <div class="dog-park-container">
            <p>空陆宠物店的狗狗公园，可供Coo&amp;RIKU menbers（空陆会员）免费使用。</p>
            <p>为了爱犬的健康，请来空陆的狗狗公园投入运动改变缺乏锻炼的生活习惯。</p>
            <p>打球、飞盘等，请和您的爱犬一起尽情享受。</p>
            <p>有关Coo&amp;RIKU menbers（空陆会员）的入会方式，请随时咨询我们店内的工作人员。</p>
        </div>
    </div>
    <hr class="cat-cafe-hr">
    <h3 class="cat-cafe-h3">
        特征<small> Feature </small>
    </h3>
    <div>
        <div class="dog-park-container">
            <p>空陆宠物店设有狗狗公园，可以让狗狗们松开牵引绳自由奔跑</p>
            <p>我们的狗狗们在家里缺乏运动，外出散步时也是为了安全着想，主人们会帮狗狗穿上背带、系上牵绳。但在狗狗公园里主人们可以放心的松开牵引绳，不用担心狗狗会放飞自我一去不返。</p>
            <p>由于我们的狗狗公园场地有限，为了防止拥挤会对入场狗狗人数进行限制，尽请谅解。</p>
        </div>
    </div>
    <hr class="cat-cafe-hr">
    <div id="dog_bottom">
        <el-row>
            <el-col span="4.8" v-for="item in imgUrl">
                <el-card>
                    <img :src="item.url" style="width: 280px;height: 350px">
                    <p style="text-align: center">{{item.info}}</p>
                </el-card>
            </el-col>
        </el-row>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            imgUrl:[{url:"imgs/dp_01.jpg",info:"Dog park left"},
                {url:"imgs/dp_02.jpg",info:"Dog park center"},
                {url:"imgs/dp_03.jpg",info:"Dog park right"}]
        },
        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>
</html>